<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节会</title>
    <link rel="stylesheet" href="imgs/zoulme.jpg" type="image/x-icon">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f8f8f8;
            width: 1226px;
            height: 100px;
            margin: auto;
        }

        header {
            background-color: #8cc;
            color: white;
            text-align: center;
            padding: 20px;
            width: 1206px;
            height: 40px;
            margin: auto;
        }

        nav {
            background-color: #8cc;
            color: white;
            text-align: center;
            padding: 10px;
            width: 1226px;
            height: 80px;
            margin: auto;
        }

        nav a {
            color: white;
            text-decoration: none;
            margin: 0 15px;
            width: 1226px;
            height: 80px;
            margin: auto;
        }

        .ems {
            background-color: white;
            color: #000;
            width: 1226px;
            height: 60px;
            font-size: 20px;
            text-align: center;




        }

        .demo img {
            width: 200px;
            height: 200px;
        }

        .demo {
            width: 200px;
            height: 200px;
            float: left;
        }

        .demo1 {

            width: 1000px;
            height: 200px;
            line-height: 28px;
            font-size: 14px;

            /* 文本样式 */
            /* 设置首行缩进 */
            text-indent: 28px;
            float: left;
            border-radius: 15px;
            box-shadow: 5px -2px 4px #999;
        }

        .demo1 p {
            margin-top: -6px;
        }

        .ems1 {
            background-color: white;
            color: #000;
            width: 1226px;
            height: 60px;
            font-size: 20px;
            float: left;
            text-align: center;
        }

        .demo2 img {
            width: 200px;
            height: 180px;
        }

        .demo2 {
            width: 200px;
            height: 180px;
            float: left;
        }

        .demo3 {

            width: 1000px;
            height: 180px;
            line-height: 28px;
            font-size: 14px;
            /* 文本样式 */
            /* 设置首行缩进 */
            text-indent: 28px;
            float: left;
            border-radius: 15px;
            box-shadow: 5px -2px 4px #999;
        }

        .demo3 p {
            margin-top: -6px;
        }

        .demo4 img {
            width: 200px;
            height: 180px;
            margin-top: 40px;
        }

        .demo4 {
            width: 200px;
            height: 180px;
            float: left;
        }

        .demo5 {
            margin-top: 40px;
            width: 1000px;
            height: 180px;
            line-height: 28px;
            font-size: 14px;
            /* 文本样式 */
            /* 设置首行缩进 */
            text-indent: 28px;
            float: left;
            border-radius: 15px;
            box-shadow: 5px -2px 4px #999;
        }

        .demo5 p {
            margin-top: -6px;

        }

        .bab {

            width: 1226px;
            height: 200px;
            margin: 15px auto;
        }

        .bab01,
        .bab01 img {
            width: 200px;
            height: 200px;
            margin-top: 25px;
        }

        .bab02,
        .bab02 img {
            height: 200px;
            width: 200px;
            margin-top: 25px;
        }

        .bab02 {
            margin-left: 120px;
        }

        .bab>div {
            float: left;

        }

        .ems2 {
            color: #000;
            width: 200px;
            height: 30px;
            font-size: 16px;
            float: left;
            background-color: rgb(255, 102, 130);
            text-align: center;

        }

        .ems3 {
            color: #000;
            width: 200px;
            height: 30px;
            font-size: 16px;
            float: left;
            background-color: rgb(255, 102, 130);
            margin-left: 120px;
            text-align: center;
        }

        .ems4 {
            color: #000;
            width: 200px;
            height: 30px;
            font-size: 16px;
            float: left;
            background-color: rgb(255, 102, 130);
            margin-left: 120px;
            text-align: center;
        }

        .ems5 {
            color: #000;
            width: 200px;
            height: 30px;
            font-size: 16px;
            float: left;
            background-color: rgb(255, 102, 130);
            margin-left: 120px;
            text-align: center;
        }

        .nav {
            width: 1226px;
            height: 58px;
            position: relative;
            margin: auto;
            clear: both;
        }

        .nav h2 {
            margin: 0;
            font-size: 22px;
            font-weight: 200;
            line-height: 58px;
            color: #424242;
        }

        .nav div {
            position: absolute;
            font-size: 16px;
            line-height: 58px;
            color: #424242;
            float: left;
            right: 0;
            top: 0;
        }
        .content_left{
            width: 1226px;
            height: 200px;
            float: left;

        }

        .content_left div{
            margin-right: 30px;
        }
    
        .content_left img {
            width: 200px;
            height: 200px;
            float: left;
        }

        .content_right{
            width: 1226px;
            height: 200px;
          
        }

        .content_right div{
            margin-right: 30px;
            margin-top: 40px;
        }
    
        .content_right img {
            width: 200px;
            height: 200px;
            float: left;
        }
       

        .crt01 {
            width: 200px;
            height: 200px;
            background-color: red;
            text-align: center;
            float: left;
            margin-left: 12px;
            box-sizing: border-box;
            transition: all .2s linear;
        }

        .crt01:hover {
            transform: translate(0, -10px);
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
        }


        .crt01 img {
            width: 200px;
            height: 200px;

        }




        footer {
         background-color: #8cc;
         width: 1226px;
            height: 40px;
         color: white;
        text-align: center;
        padding: 20px 0;
         box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
         clear: both;
            }

          footer p {
        font-size: 16px;
        margin: 0;
       
          }

      .social-icons {
           margin-top: 10px;
        }

      .social-icons i {
          margin: 0 10px;
          font-size: 24px;
         }
        
    </style>
</head>

<body>
    <header>
        <h1>走了么旅游网</h1>
    </header>
    <nav>
        节会-端午节
    </nav>
    
    

    <div class="ems">
        端午节的由来
    </div>

    <div class="home">
        <div class="demo">
            <img class="dd" src="imgs/dw0.jpg" alt="">
        </div>
        <div class="demo1">
            <p>
                端午节，是中国传统节日之一，每年的农历五月初五庆祝。此节日历史悠久，由来多样，主要有以下几种说法,最为广泛接受的是纪念屈原说。
            </p>
            <p>
                屈原是战国时期楚国的一位大臣，他以其高洁的品格、深沉的爱国情怀和卓越的文学才能而深受人们敬仰。然而，由于其直言敢谏，屈原在朝廷中受到了排挤和诽谤，被流放到了远方。公元前278年，秦国攻破了楚国的首都，屈原在悲愤之中投汨罗江自尽。当地的百姓闻讯马上划船捞救，但却再也没有找到他的尸体。百姓们怕江中的鱼吃掉他的身体，便纷纷回家拿来米团投入江中，以免鱼虾糟蹋屈原的尸体，后来就成了吃粽子的习俗。
            </p>
            <p>
                第二种说法是纪念伍子胥说。伍子胥是春秋时期吴国的大臣，他因忠诚和智慧而深受吴王阖闾的信任。然而，在吴王夫差即位后，伍子胥因直言不讳，反而遭到了疏远和诽谤，最终被赐死。伍子胥死前留下遗言，要将他的眼睛挖出挂在吴国的东门上，以看越国如何攻破吴国。吴王夫差大怒，命人将他的尸体在五月五日投入江中。此后，人们便在这一天纪念他。
            </p>
        </div>
    </div>

    <div class="ems1">
        端午节的习俗
    </div>
    <div class="home1">
        <div class="demo2">
            <img class="dd" src="imgs/dw1.jpg" alt="">
        </div>
        <div class="demo3">
            <p>
                粽子作为端午节的代表食物。一说是为了投入江中，以免鱼虾噬咬屈原遗体；二说是因为粽子的棱角像一把刀子，可以将疾病灾害铲除。
            </p>
            <p>
                粽子，也称“角黍”、“筒粽”等。“粽”字本作“糉”，历史上跟粽子沾边儿的文字记载，最早大概见于汉代许慎的《说文解字》，将之解释为“芦叶裹米也”。西晋新平太守周处所写的《风士记》，则明确提到了“角黍”一词：“仲夏端五，方伯协极。享用角黍，龟鳞顺德。”
            </p>
            <p>
                粽，即“粽籺”，俗称“粽子”，属“籺”的其中一种。“籺”是逢年过节时用来拜神祭祖的贡品，籺有很多品种，不同的节日会做不同的籺，做籺拜神祭祖是古老习俗。粽籺的主要材料是稻米、馅料和箬叶（或柊叶）等。由于各地饮食习惯的不同，粽子形成了南北风味；从口味上分，粽子有咸粽和甜粽两大类。端午食粽之风俗，千百年来在中国盛行不衰，已成了中华民族影响最大、覆盖面最广的民间饮食习俗之一，而且流传到朝鲜、日本及东南亚诸国。
            </p>
        </div>
    </div>

    <div class="home2">
        <div class="demo4">
            <img class="dd" src="imgs/dw2.jpg" alt="">
        </div>
        <div class="demo5">
            <p>
                相传起源于古时楚国人因舍不得贤臣屈原投江死去，许多人划船追赶拯救。他们争先恐后，追至洞庭湖时不见踪迹，之后每年五月五日划龙舟以纪念之。借划龙舟驱散江中之鱼，以免鱼吃掉屈原的身体。
            </p>
            <p>
                赛龙舟的历史可以追溯到古代的上巳节和端午节。上巳节俗中有一项重要活动是泛龙舟，起源于宫廷禊礼，后来发展为全民参与的龙舟竞渡。端午节最初是中国人民祛病防疫的节日，江浙地区春秋之前就有以龙舟竞渡形式举行龙图腾祭祀的习俗。赛龙舟不仅是一种体育娱乐活动，更体现了中国传统的悠久历史文化和人们的集体主义精神。赛龙舟在南北朝时期已经非常盛行，后来传到国外，成为国际比赛。2010年广州亚运会将赛龙舟列为正式比赛项目，2011年赛龙舟被列入国家级非物质文化遗产名录。
            </p>
        </div>
    </div>

    <div class="bab">
        <div class="bab01">
            <img src="imgs/dwxs1.jpg" alt="">
        </div>
        <div class="bab02">
            <img src="imgs/dwxs2.jpg" alt="">
        </div>
        <div class="bab02">
            <img src="imgs/dwxs3.jpg" alt="">
        </div>
        <div class="bab02">
            <img src="imgs/dwxs4.jpg" alt="">
        </div>
    </div>

    <div class="ems2">
        挂艾草
    </div>

    <div class="ems3">
        放纸鸢
    </div>

    <div class="ems4">
        跳钟馗
    </div>

    <div class="ems5">
        栓五色丝线
    </div>

    <div class="nav">
        <h2>更多节日特辑</h2>
        <div>查看更多</div>
    </div>



    <div class="content_left">

        <div class="crt01">
            
            <img src="imgs/jr5.jpg" alt="">
        </div>
        <div class="crt01">
            <img src="imgs/jr6.jpg" alt="">
        </div>
        <div class="crt01">
            <img src="imgs/jr3.jpg" alt="">
        </div>
        <div class="crt01">
            <img src="imgs/jr4.jpg" alt="">
        </div>
        <div class="crt01">
            <img src="imgs/jr2.jpg" alt="">
        </div>

    </div>

    <div class="content_right">

        <div class="crt01">
            <img src="imgs/jr11.jpg" alt="">
        </div>
        <div class="crt01">
            <img src="imgs/jr1.jpg" alt="">
            
        </div>
        <div class="crt01">
            <img src="imgs/jr10.jpg" alt="">
        </div>
        <div class="crt01">
            <img src="imgs/jr7.jpg" alt="">
        </div>
        <div class="crt01">
            <img src="imgs/jr9.jpg" alt="">
        </div>

    </div>

    <footer>
        <p>版权所有 &copy; 2024 走了么旅游官网</p >
         <div class="social-icons">
         <i class="fab fa-facebook"></i>
         <i class="fab fa-twitter"></i>
        <i class="fab fa-instagram"></i>
         </div>
         </footer>
        
         <script>
         window.addEventListener('load', function () {
         document.body.classList.add('animate__animated', 'animate__fadeIn');
        });
        </script>





</body>

</html>